<template>
	<view>
		<view style="background-color: #19BE6B;width: 100%;height: 150rpx;"></view>
		<view class="card" style="margin-top: -80rpx;padding: 40rpx 0;">
			<u-steps v-if="orderInfo.status!=8&&orderInfo.status!=9" mode="number" active-color="#19be6b"
				:list="numList" :current="orderInfo.status"></u-steps>
			<u-steps v-else mode="number" active-color="#19be6b" :list="numList2" :current="orderInfo.status"></u-steps>
		</view>
		<view class="card">
			<view class="default-window u-border-bottom">
				<u-section title="提货方式" :right="false" line-color="#19be6b">
					<template #right>
						
						<text style="color: green;">{{orderInfo.pick_type===1?'自提':'邮寄'}}</text>
					</template>
				</u-section>
			</view>
			<view class=" default-window flex">
				<view class="">
					<u-icon :name="orderInfo.pick_type===1?'bag':'map'" size="50"></u-icon>
				</view>
				<view style="padding-left: 30rpx;flex: 1;">
					<view class="flex place bold">
						<view>{{ orderInfo.real_name }}</view>
						<view>{{ orderInfo.phone }}</view>
					</view>
					<view class="u-font-26 u-tips-color">
						{{ orderInfo.province }}{{orderInfo.city}}{{orderInfo.county}}{{orderInfo.address}}
					</view>
				</view>

			</view>
		</view>

		<view class="card">
			<view class="default-window u-border-bottom">
				<u-section title="订单信息" :right="false" line-color="#19be6b"></u-section>
			</view>
			<view class="default-window flex place">
				<view>订单号</view>
				<view>{{orderInfo.no}}</view>
			</view>
			<view class="default-window flex place">
				<view>下单时间</view>
				<view>{{orderInfo.time}}</view>
			</view>
			<!-- <view class="default-window flex place">
				<view>支付方式</view>
				<view class="font-red bold">现金支付</view>
			</view> -->
			<view class="default-window flex place">
				<view>留言</view>
				<view>{{orderInfo.remark||'未填写'}}</view>
			</view>
		</view>
		<view v-if="orderInfo.status>=2" class="card">
			<view class="default-window u-border-bottom">
				<u-section title="运输信息" :right="false" line-color="#19be6b"></u-section>
			</view>
			<!-- <view class="default-window flex place">
				<view>快递公司</view>
				<view>{{orderInfo.express_company||'暂未发货'}}</view>
			</view>
			<view class="default-window flex place">
				<view>快递单号</view>
				<view class="flex">
					<view>{{orderInfo.express_no||'暂未发货'}}</view>
					<view @click="copyNo" class="font-red" style="margin-left: 10rpx;">复制</view>
				</view>
			</view> -->
			<view v-for="(item,index) in orderInfo.express_log" class="default-window flex place">
				<view>{{item.express_company}}</view>
				<view class="flex">
					<text>{{item.express_no}}</text>
					<u-button @click="showExpress(item.log,item.is_express_log)" style="margin-left: 10rpx;"
						:type="item.is_express_log===0? 'info':'primary'" size="mini">
						{{item.is_express_log===0? '暂无物流数据':'查看物流'}}
					</u-button>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="default-window u-border-bottom">
				<u-section title="商品清单" :right="false" line-color="#19be6b"></u-section>
			</view>
			<view v-for="(item, index) in orderInfo.order_product" :key="index" class="u-border-bottom">
				<view class="default-window flex" style="align-items: flex-start;">
					<view class="product-image">
						<image :src="item.image" class="image" mode="widthFix"></image>
					</view>
					<view class="product-name">
						<view>{{item.name}}</view>
						<view class="u-font-12 u-tips-color">
							<text>{{item.sku_str}}</text>
						</view>
						<view class="flex place">
							<view class="font-red bold">￥{{item.discount_price}}</view>
							<view class="u-font-11">×{{item.num}}</view>
						</view>
						<view class="flex place">
							<view>

							</view>
							<view>

								<text v-if="item.status==8" class="u-tips-color u-font-12">退款中</text>
								<text v-if="item.status==9" class="u-tips-color u-font-12">退款成功</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="default-window flex place ">
				<view>邮费</view>
				<view class="font-red">{{orderInfo.freight == 0 ? '免运费' : '￥' + orderInfo.freight}}</view>
			</view>
			<view class="default-window flex place u-border-bottom">
				<view>共{{orderInfo.order_product.length}}件商品</view>
				<view class="flex">
					<view>实际支付</view>
					<view class="u-font-40 font-red bold" style="margin: 0 10rpx;">{{orderInfo.actual_pay}}</view>
					<view>元</view>
				</view>
			</view>

		</view>
		<view class="default-window flex place">
			<view></view>
			<view class="flex around">
				<u-button v-if="[0,3,9,10].includes(orderInfo.status)" class="btn">删除订单</u-button>
				<u-button v-if="orderInfo.status==0" class="btn">取消订单</u-button>
				<!-- <u-button v-if="orderInfo.status==1" class="btn" @click="refundAll">整单退款</u-button> -->
				<u-button @click="payOrder(orderInfo.no)" v-if="orderInfo.status==0" type="success" class="btn">立即支付
				</u-button>
				<u-button @click="confirmOrder(orderInfo.order_id)" v-if="orderInfo.status==2" type="success"
					class="btn">确认收货</u-button>
			</view>
		</view>
		<u-popup mode="bottom" v-model="show" height="800rpx">
			<view style="padding: 60rpx;">
				<u-time-line>
					<u-time-line-item v-for="(item,index) in expressLog" :key="index">
						<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
						<template v-slot:content>
							<view>
								<view class="u-order-desc">{{item.operate}}</view>
								<view class="u-order-time">{{item.time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				expressLog: [],
				numList: [{
					name: '下单'
				}, {
					name: '付款'
				}, {
					name: '运输'
				}, {
					name: '签收'
				}],
				numList2: [{
					name: '有退款'
				}],
				orderInfo: {
					order_product: []
				},
				loadId: 0,

				payWayList: this.$store.state.product.payWay,
			};
		},
		onLoad(data) {
			this.loadId = data.loadId;
		},
		onReady() {
			this.loadOrder();
		},
		methods: {
			//显示物流信息
			showExpress(log, status) {
				if (status === 1) {
					this.show = true;
					this.expressLog = log;
				}

			},
			//删除订单
			delOrder() {
				this.$showModal('删除后无法恢复，确认删除？', () => {
					let params = {
						order_id: this.loadId,
					}
					this.$api('Order/del', params).then(data => {
						if (data.status == 1) {
							uni.navigateBack();
						} else {
							this.$showToast(data.msg);
						}
					})
				})
			},

			//单品退款
			refund(id) {
				this.$showModal('是否退款该笔商品？', () => {
					let params = {
						order_product_id: id
					}
					this.$api('Order/refund', params).then(data => {
						if (data.status == 1) {
							this.loadOrder();
						} else {
							this.$showToast(data.msg);
						}
					})
				})
			},
			//整单退款
			refundAll() {
				this.$showModal('是否将整个订单的产品进行退款？', () => {
					let params = {
						order_id: this.orderInfo.order_id
					}
					this.$api('Order/refund', params).then(data => {
						if (data.status == 1) {
							this.loadOrder();
						} else {
							this.$showToast(data.msg);
						}
					})
				})
			},
			//支付订单
			payOrder(no) {
				this.$showModal('是否支付该笔订单？', () => {
					const that = this
					uni.showActionSheet({
						title: '请选择支付方式',
						itemList: that.payWayList.map(item => {
							return item.pay_text
						}),
						success: (res) => {
							const payType = this.payWayList[res.tapIndex].pay_type

							let params = {
								is_mini: 1,
								no: no,
								pay_type: payType,
							};
							this.$api('Pay/order', params).then(data => {
								if (data.status == 1) {
									uni.hideLoading();
									this.$pay(data.data.response).then(data => {
										uni.reLaunch({
											url: '/pages/public/success/success'
										})
									}).catch(res => {
										uni.switchTab({
											url: '/pages/usercenter/usercenter'
										})
										// this.$showToast(res.errMsg)
									})
								} else if (data.status == 2) {
									uni.hideLoading();
									this.$showToast('支付成功');
									uni.reLaunch({
										url: '/pages/public/success/success'
									})
								} else {
									this.$showToast(data.msg);
								}

							})
						},
					})


				})
			},
			loadOrder() {
				let params = {
					order_id: this.loadId
				};
				this.$api('Order/detail', params).then(data => {
					if (data.status == 1) {

						this.orderInfo = data.data.order;
					} else {
						this.$api.msg(data.msg);
					}
				});
			},
			//复制快递单号
			copyNo() {
				let data = this.orderInfo.express_no;
				let that = this;
				uni.setClipboardData({
					data: data,
					success() {
						that.$showToast('复制成功');
					}
				})
			},
			//确认收货
			confirmOrder(id) {
				this.$showModal('是否确认收货此商品？', () => {
					let params = {
						order_id: id
					};
					this.$api('Order/confirm', params).then(data => {
						if (data.status == 1) {
							this.$showToast(data.msg);
							this.loadOrder();
						} else {
							this.$showToast(data.msg);
						}
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.btn {
		margin-left: 10rpx;
	}

	.product-image {
		width: 130rpx;
		height: 130rpx;
	}

	.product-name {
		padding-left: 30rpx;
		flex: 1;
	}
</style>